<!-- 单选框 -->
<script setup>
// #导出vue方法
import { ref, defineProps, defineEmits, computed } from "vue";
// -------------------------------------------------------------------
const props = defineProps({
	// 表头
	label: String,
	// 多选选项
	options: Array,
	// 提示
	placeholder: String,
	// 选择的单元
	modelValue: String,
	// 警告文本
	warningTxt: String,
	// 规则
	rules: Array,
});
const emit = defineEmits(["update:modelValue"]);

const popupShow = ref(false);

// 计算指定指定规则
const CheckRulesRequired = computed(() => {
	let res = false;
	if (props.rules && props.rules.includes("required")) {
		// 必须填写
		if (!props.modelValue) {
			res = true;
		}
	}

	return res;
});

const PopupShow = (value) => {
	popupShow.value = value;
};

const BtnClick = (value) => {
	emit("update:modelValue", value);
	PopupShow(false);
};
</script>

<template>
	<div class="form-row">
		<div class="row-label">{{ label }}</div>

		<div class="row-content">
			<div class="row-com">
				<div class="form-radio">
					<div class="radio-content" @click="PopupShow(true)">
						<span class="info" v-if="modelValue">
							{{ modelValue }}
						</span>
						<span class="placeholder" v-else>{{
							placeholder
						}}</span>
						<span class="icon">></span>
					</div>

					<div
						class="bg-shadow"
						v-if="popupShow"
						@click="PopupShow(false)"
					></div>
					<div class="radio-popup" v-if="popupShow">
						<div class="title">请选择</div>
						<div
							class="radio-box y-flex-center"
							v-for="(box, index) in options"
							:key="index"
							@click="BtnClick(box)"
						>
							{{ box }}
						</div>
					</div>
				</div>
			</div>

			<!-- 警告信息 -->
			<div class="warning" v-if="CheckRulesRequired">
				<span>*</span>
				<span>{{ warningTxt }}</span>
			</div>
		</div>
	</div>
</template>

<style scoped lang="less">
.form-radio {
	.radio-content {
		width: 100%;
		height: 60px;

		color: #333333;
		font-size: 30px;

		position: relative;

		.icon {
			position: absolute;
			right: 0;
			top: 0;
		}

		.placeholder {
			opacity: 0.7;
		}
	}

	.radio-popup {
		position: fixed;
		bottom: 0;
		left: 0;
		z-index: 60;
		width: 100%;
		height: 40%;
		background-color: #ffffff;

		.title {
			width: 100%;
			height: 60px;
			text-align: center;
			font-weight: bold;
		}

		.radio-box {
			height: 50px;
			width: 100%;
			border-bottom: 1px solid #999999;
			text-align: center;
		}
	}
}
</style>
